<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../../css/wwl/demo.css" />
    <link rel="stylesheet" href="../../css/yjx/icon/iconfont.css">
    <link rel="stylesheet" href="../../css/yjx/离职管理.css">
    
</head>

<body>
    <nav class="nav-ct">
        <div class="nav-hd">
            <span class="iconfont icon-oabangong"></span>
            <span class="title">办公后台系统</span>
        </div>
        <div class="center">
            <ul class="nav-content">
                <li><a href="">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="">审批</a></li>
                <li><a href="">权限设置</a></li>
            </ul>
        </div>
    </nav>
    <div class="ct-box">
        <div class="nav-ct-2">
            <ul class="nav-ct-menu">
                <!-- <li class="title">组织架构
                        <ul>
                            <li><a href="">组织管理</a></li>
                            <li><a href="">组织架构图</a></li>
                            <li><a href="">工作职场</a></li>
                        </ul>
                    </li> -->
                <li class="title">员工管理
                    <ul>
                        <li><a href="./员工花名册.html">花名册</a></li>
                        <li><a href="./转正管理.html">转正管理</a></li>
                        <li><a href="./离职管理.html">离职管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 最外层盒子 -->
        <div class="y-largestbox">
            <!-- 搜索栏大盒子 -->
            <div class="y-searchbox">
                <h2 class="y-title">离职管理</h2>
                <div class="y-search1">
                    <label for="" class="y-label ">姓名：</label>
                    <input type="text" class="y-input">
                    <label for="" class="y-label">职位：</label>
                    <select name="" id="" class="y-select">
                        <option value="前端开发">前端开发</option>
                        <option value="后端开发">后端开发</option>
                        <option value="UI设计">UI设计</option>
                        <option value="" selected></option>
                    </select>
                    <label for="" class="y-label">部门：</label>
                    <select name="" id="" class="y-select">
                        <option value="研发部">研发部</option>
                        <option value="产品部">产品部</option>
                        <option value="技术部">技术部</option>
                        <option value="" selected></option>
                    </select>
                </div>
                <div class="y-search2">
                    <label for="" class="y-label">状态：</label>
                    <select name="" id="" class="y-select">
                        <option value="已发起">已发起</option>
                        <option value="已离职">已离职</option>
                        <option value="已放弃">已放弃</option>
                        <option value="" selected></option>
                    </select>
                    <label for="" class="y-label">日期：</label>
                    <input type="text" class="y-input">
                    <label for="" class="y-label">电话：</label>
                    <input type="text" class="y-input">
                    <button class="y-searchBtn">搜索</button>
                    <button class="y-resetBtn">重置</button>
                </div>
                <div class="y-screen clear">
                    <h5>筛选条件:</h5>
                    <div class="y-box1 clear" id="del1box">
                        <span class="y-title1">部门：研发部</span>
                        <span class="y-del" id="del1">x</span>
                    </div>
                    <div class="y-box1 clear" id="del2box">
                        <span class="y-title1">职位：前端开发</span>
                        <span class="y-del" id="del2">x</span>
                    </div>
                    <div class="y-box1 clear" id="del3box">
                        <span class="y-title1">姓名：张三</span>
                        <span class="y-del" id="del3">x</span>
                    </div>
                </div>
            </div>


            <!-- 表格大盒子 -->
            <div class="y-tablebox clear">
                <!-- 左侧三个按钮 -->
                <div class="y-btnall2 clear">
                    <div class="y-Pendingresignation y-borderTop">
                        <span>待离职</span>
                    </div>
                    <div class="y-Resigned">
                        <span>已离职</span>
                    </div>
                    <div class="y-Abandoned">
                        <span>已放弃</span>
                    </div>
                </div>
                <!-- 上方三个按钮 -->
                <div class="y-btnall clear">
                    <div class="y-import">
                        <span>导入</span>
                    </div>
                    <div class="y-export">
                        <span>导出</span>
                    </div>
                    <div class="y-newadd" data-toggle="modal" data-target="#myModal1">
                        <!-- <span class="span span-primary span-lg" data-toggle="modal" data-target="#identifier">+新增员工</span> -->
                        +发起离职
                    </div>
                </div>


                <!-- bootstrap表格 -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>头像/姓名</th>
                            <th>员工编号</th>
                            <th>手机号</th>
                            <th>部门</th>
                            <th>职位</th>
                            <th>申请日期</th>
                            <th>离职日期</th>
                            <th>离职类型</th>
                            <th>离职原因</th>
                            <th>最后工作日</th>
                            <th>薪资结算日</th>
                            <th>离职状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                        <td><input type="checkbox" class="y-checkinput">张三</td>
                        <td>001</td>
                        <td>183***9220</td>
                        <td>研发部</td>
                        <td>前端开发</td>
                        <td>2022-09-13</td>
                        <td>2022-10-13</td>
                        <td>被动离职</td>
                        <td>个人原因</td>
                        <td>2022-10-13</td>
                        <td>2022-10-13</td>
                        <td>已发起</td>
                        <td class="y-color">
                            <span>确认离职</span>
                            <span>放弃离职</span>
                        </td>
                    </tr> -->
                    </tbody>
                </table>

                <!-- 分页 -->
                <div class="y-paging clear">
                    <ul class="pagination">
                        <!-- <li id="pre"><a href="#">&laquo;</a></li>
                                <li id="pages"><a href="#">1</a></li>
                                <li id="pages"><a href="#">2</a></li>
                                <li id="pages"><a href="#">3</a></li>
                                <li id="next"><a href="#">&raquo;</a></li> -->
                    </ul>
                    <!-- 多少条每页 -->
                    <div class="y-how">
                        <span></span>
                    </div>
                </div>

                <!-- 发起离职模态框 -->
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">离职员工信息</h4>
                            </div>
                            <div class="modal-body">
                                <form action="">
                                    <div class="row">
                                        <label for="" class="col-sm-3">姓名：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">工号：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">手机号：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">部门：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">职位：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">申请日期：</label><input type="text">
                                    </div>

                                    <div class="row">
                                        <label for="" class="col-sm-3">离职日期：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">离职类型：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">离职原因：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">最后工作日：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">薪资结算日：</label><input type="text">
                                    </div>
                                    <div class="row">
                                        <label for="" class="col-sm-3">离职状态：</label><input type="text">
                                        <!--  disabled value="已发起" -->
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="yes">确认</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>


                <!-- 确认离职模态框 -->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">警告</h4>
                            </div>
                            <div class="modal-body">
                                <h3>确认该员工已离职？</h3>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="yes1">
                                    确认
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <!-- 放弃离职模态框 -->
                <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">警告</h4>
                            </div>
                            <div class="modal-body">
                                <h3>确认放弃该员工的离职申请？</h3>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="yes2">
                                    确认
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

            </div>
        </div>

        <script>
            let data = [
                { name: "张一", job: "001", phone: "183***9220", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "张二", job: "002", phone: "183***9221", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "张三", job: "003", phone: "183***9222", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "李一", job: "004", phone: "183***9223", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "李二", job: "005", phone: "183***9224", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "李三", job: "006", phone: "183***9225", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "王一", job: "007", phone: "183***9226", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "王二", job: "008", phone: "183***9227", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "王三", job: "009", phone: "183***9228", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "杨一", job: "010", phone: "183***9229", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "杨二", job: "011", phone: "183***9230", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "杨三", job: "012", phone: "183***9231", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "赵一", job: "013", phone: "183***9232", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "赵二", job: "014", phone: "183***9233", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "赵三", job: "015", phone: "183***9234", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "周一", job: "016", phone: "183***9235", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "周二", job: "017", phone: "183***9236", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "周三", job: "018", phone: "183***9237", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "吴一", job: "019", phone: "183***9238", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "吴二", job: "020", phone: "183***9239", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "吴三", job: "021", phone: "183***9240", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "宋一", job: "022", phone: "183***9241", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "宋二", job: "023", phone: "183***9242", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "宋三", job: "024", phone: "183***9243", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "唐一", job: "025", phone: "183***9244", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "唐二", job: "026", phone: "183***9245", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "唐三", job: "027", phone: "183***9246", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "高一", job: "028", phone: "183***9247", department: "研发部", position: "前端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "高二", job: "029", phone: "183***9248", department: "产品部", position: "后端开发", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "高三", job: "030", phone: "183***9249", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "主动离职", reason: "公司原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
                { name: "何一", job: "031", phone: "183***9250", department: "技术部", position: "UI设计", date: "2022-09-13", date2: "2022-10-13", type: "被动离职", reason: "个人原因", lastday: "2022-10-13", salaryday: "2022-10-13", state: "已发起" },
            ];

            // 已离职
            let arr1 = [];

            // 已离职
            let arr2 = [];


            // 每页展示12条信息
            // console.log(data);
            const pageSize = 12;

            // 渲染列表
            function renderTbody(data, currentPage = 1) {
                // 渲染分页
                renderPaging(data, currentPage);
                let startIndex = pageSize * (currentPage - 1); // 起始下标
                let endIndex = startIndex + pageSize; // 结束下标
                let dataByPaging = data.slice(startIndex, endIndex);

                // console.log(dataByPaging,typeof dataByPaging);
                // 多少条每页
                $(".y-how").text(`${dataByPaging.length}条/页`)


                $("tbody").empty();
                for (let i = 0; i < dataByPaging.length; i++) {
                    $("tbody").append(`<tr>
                        <td><input type="checkbox" class="y-checkinput">${dataByPaging[i].name}</td>
                        <td>${dataByPaging[i].job}</td>
                        <td>${dataByPaging[i].phone}</td>
                        <td>${dataByPaging[i].department}</td>
                        <td>${dataByPaging[i].position}</td>
                        <td>${dataByPaging[i].date}</td>
                        <td>${dataByPaging[i].date2}</td>
                        <td>${dataByPaging[i].type}</td>
                        <td>${dataByPaging[i].reason}</td>
                        <td>${dataByPaging[i].lastday}</td>
                        <td>${dataByPaging[i].salaryday}</td>
                        <td>${dataByPaging[i].state}</td>
                        <td class="y-color">
                            <span id="ConfirmResignation" data-id="${dataByPaging[i].job}" data-toggle="modal" data-target="#myModal2">确认离职</span>
                            <span id="WaiverOfResignation" data-id="${dataByPaging[i].job}" data-toggle="modal" data-target="#myModal3">放弃离职</span>
                        </td>
                    </tr>`)
                }


            }

            renderTbody(data);

            // 渲染分页
            function renderPaging(data, currentPage = 1) {
                $(".pagination").empty();
                $(".pagination").append(`<li id="pre"><a href="#">&laquo;</a></li>`)
                let num = Math.ceil(data.length / pageSize);
                for (let i = 1; i <= num; i++) {
                    $(".pagination").append(`<li id="pages"><a href="#">${i}</a></li>`);
                }
                $(".pagination").append(`<li id="next"><a href="#">&raquo;</a></li>`);
                $("#pages>a").eq(currentPage - 1).addClass("y-pagingcolor")
            }

            // 分页点击事件
            $(".pagination").on("click", "#pages", function (event) {
                console.log(event.target);
                let currentPage = parseInt($(event.target).text());
                renderTbody(data, currentPage)
            })

            // 上一页
            $(".pagination").on("click", "#pre", function () {
                // 获取当前页
                let currentPage = parseInt($(".pagination .y-pagingcolor").text());
                // console.log(currentPage);
                // 计算最多有多少页
                if (currentPage === 1) {
                    return;
                }
                renderTbody(data, currentPage - 1);
            })

            // 下一页
            $(".pagination").on("click", "#next", function () {
                // 获取当前页
                let currentPage = parseInt($(".pagination .y-pagingcolor").text());
                // console.log(currentPage);
                // 计算最多有多少页
                let max = Math.ceil(data.length / pageSize);
                if (currentPage === max) {
                    return;
                }
                renderTbody(data, currentPage + 1);
            })

            // 重置
            $(".y-resetBtn").on("click", function () {
                $(".y-select").val("");
                $(".y-input").val("");
            })

            // x删除
            $("#del1").on("click", function () {
                $("#del1box").remove();
            })

            $("#del2").on("click", function () {
                $("#del2box").remove();
            })

            $("#del3").on("click", function () {
                $("#del3box").remove();
            })

            // 发起离职
            $("#yes").on("click", function () {
                for (let i = 0; i < $(".modal-body input").length; i++) {
                    if (!$(".modal-body input").eq(i).val()) {
                        $(".modal-body input").val("");
                        $('#myModal1').modal('hide');
                        return;
                    }
                }
                let obj = {
                    name: $(".modal-body input").eq(0).val(),
                    job: $(".modal-body input").eq(1).val(),
                    phone: $(".modal-body input").eq(2).val(),
                    department: $(".modal-body input").eq(3).val(),
                    position: $(".modal-body input").eq(4).val(),
                    date: $(".modal-body input").eq(5).val(),
                    date2: $(".modal-body input").eq(6).val(),
                    type: $(".modal-body input").eq(7).val(),
                    reason: $(".modal-body input").eq(8).val(),
                    lastday: $(".modal-body input").eq(9).val(),
                    salaryday: $(".modal-body input").eq(10).val(),
                    state: $(".modal-body input").eq(11).val(),

                }
                data.push(obj);
                $(".modal-body input").val("");
                $('#myModal1').modal('hide');
                renderTbody(data);
            })

            // 确认离职
            $("tbody").on("click", "#ConfirmResignation", function (event) {
                let dataId = $(event.target).attr("data-id"); // 字符串类型

                // 确认
                $("#yes1").on("click", function () {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].job === dataId) {
                            data[i].state = "已离职";

                        }
                    }
                    $('#myModal2').modal('hide');
                    renderTbody(data);
                })
            })

            // 放弃离职
            $("tbody").on("click", "#WaiverOfResignation", function (event) {
                let dataId = $(event.target).attr("data-id"); // 字符串类型

                // 确认
                $("#yes2").on("click", function () {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].job === dataId) {
                            data[i].state = "已放弃";
                            // localStorage.setItem("WaiverOfResignation", JSON.stringify(data[i]));
                            // let obj1 = JSON.parse(localStorage.getItem("WaiverOfResignation"));
                            // // arr2.splice(0, 1)
                            // arr2.push(obj1);
                        }
                    }
                    $('#myModal3').modal('hide');
                    renderTbody(data);
                })
            })


            // 表格左侧三个按钮点击事件


            // 待离职
            $(".y-Pendingresignation").on("click", function () {
                $(".y-Resigned").removeClass("y-borderTop");
                $(".y-Abandoned").removeClass("y-borderTop");
                $(".y-Pendingresignation").addClass("y-borderTop");
                renderTbody(data);
            })

            // 已离职
            $(".y-Resigned").on("click", function () {
                $(".y-Abandoned").removeClass("y-borderTop");
                $(".y-Pendingresignation").removeClass("y-borderTop");
                $(".y-Resigned").addClass("y-borderTop");
                arr1 = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].state === "已离职") {
                        arr1.push(data[i])
                    }
                }
                renderTbody(arr1);
            })

            // 已放弃
            $(".y-Abandoned").on("click", function () {
                $(".y-Resigned").removeClass("y-borderTop");
                $(".y-Pendingresignation").removeClass("y-borderTop");
                $(".y-Abandoned").addClass("y-borderTop");
                arr2 = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].state === "已放弃") {
                        arr2.push(data[i])
                    }
                }
                renderTbody(arr1);
                renderTbody(arr2);
            })

            // 模糊搜索
            $(".y-searchBtn").on("click", function () {
                let value1 = $(".y-input").eq(0).val(); // 姓名
                let value2 = $(".y-input").eq(1).val(); // 日期
                let value3 = $(".y-input").eq(2).val(); // 电话
                let value4 = $(".y-select").eq(0).val(); // 职位
                let value5 = $(".y-select").eq(1).val(); // 部门
                let value6 = $(".y-select").eq(2).val(); // 状态
                if (value1 == "" || value2 == "" || value3 == "" || value4 == "" || value5 == "" || value6 == "") {
                    // 恢复原来的数据
                    renderTbody(data);
                    return;
                }
                let searchData = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name.includes(value1) !== true || data[i].date.includes(value2) !== true || data[i].phone.includes(value3) !== true || data[i].position.includes(value4) !== true || data[i].department.includes(value5) !== true || data[i].state.includes(value6) !== true) {
                        renderTbody(data);
                    }
                    if (data[i].name.includes(value1) === true && data[i].date.includes(value2) === true && data[i].phone.includes(value3) === true && data[i].position.includes(value4) === true && data[i].department.includes(value5) === true && data[i].state.includes(value6) === true) {
                        searchData.push(data[i]);
                    }
                }
                renderTbody(searchData);
            })

        </script>
</body>

</html>